<!--  -->
<template>
  <div id="main">
    <h2>机构管理</h2>

    <!-- <div id="search-card">
      <div id="search-content">
        <el-form v-model="search" :inline="true">

          <el-form-item label="分支机构名称">
            <el-input v-model="search.campusName" />
          </el-form-item>

          <el-form-item label="地区">
            <el-input v-model="search.provice" />
          </el-form-item>

          <el-form-item label="负责人">
            <el-input v-model="search.head" />
          </el-form-item>

          <el-form-item label="联系人">
            <el-input v-model="search.conntact" />
          </el-form-item>

          <el-form-item label="所属机构">
            <el-input v-model="search.org" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="margin-left:10px" @click="conditionQuery">查找</el-button>
            <el-button icon="el-icon-refresh" circle @click="fetchData()" />
          </el-form-item>

        </el-form>
      </div>
    </div> -->
    <div id="table-area">
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column
          label="序号"
          type="index"
          min-width="5%"
          align="center"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="campus.campusName"
          label="机构名称"
          min-width="18%"
        />

        <el-table-column
          align="center"
          prop="campus.provice"
          label="地区"
          min-width="6%"
        >
          <template slot-scope="Scope">
            <span v-if="Scope.row.campus.provice==null">未选择</span>
            <span v-else>{{ Scope.row.campus.provice }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="userName"
          label="负责人"
          min-width="6%"
        />

        <el-table-column
          align="center"
          prop="campus.conntact"
          label="联系人"
          min-width="6%"
        />

        <el-table-column
          align="center"
          prop="campus.contactNumber"
          label="联系电话"
          min-width="10%"
        />

        <el-table-column
          align="center"
          prop="orgName"
          label="所属品牌"
          min-width="10%"
        />

        <el-table-column
          align="center"
          prop="campus.campusState"
          label="当前状态"
          min-width="5%"
        >
          <template slot-scope="Scope">
            <span v-if="Scope.row.campus.campusState==0" style="color:red">未上线</span>
            <span v-if="Scope.row.campus.campusState==1" style="color:green">已上线</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" min-width="30%">
          <template slot-scope="Scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleOpen(Scope.row.campus.campusId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" @close="handleClose">
      <el-form ref="campus" :model="campus" label-position="top">
        <!-- <el-form-item label="校区编号">
            <el-input v-model="campus.campusId" autocomplete="off" readonly="" />
          </el-form-item> -->
        <el-form-item prop="campusName" label="机构名称">
          <el-input v-model="campus.campusName" autocomplete="off" maxlength="50" show-word-limit readonly />
        </el-form-item>

        <el-form-item prop="orgId" label="所属机构">
          <!-- <el-input v-model="campus.orgId" autocomplete="off" /> -->
          <el-select v-model="campus.orgId" placeholder="请选择" disabled>
            <el-option
              v-for="o in org"
              :key="o.orgId"
              :value="o.orgId"
              :label="o.orgName"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="机构图片">

          <el-upload
            class="avatar-uploader"
            name="files"
            :action="url"
            :show-file-list="false"
            disabled
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <!-- <img v-if="type==2" :src="campus.campusImg" width="200px" height="120px"> -->
        </el-form-item>
        <el-form-item prop="orgType" label="机构分类">
          <!-- <el-input v-model="campus.orgType" autocomplete="off" /> -->
          <el-select v-model="campus.orgType" placeholder="请选择" disabled>
            <el-option
              v-for="t in orgT"
              :key="t.id"
              :value="t.id"
              :label="t.typeName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="机构介绍">
          <!-- <el-input v-model="campus.campusInfo" autocomplete="off" type="textarea" autosize maxlength="100" /> -->
          <p v-html="campus.campusInfo" />
          <!-- <editor :cur-value="campus.campusInfo" readonly @input="newContent" /> -->
        </el-form-item>
        <el-form-item prop="contactTel" label="联系电话(座机)">
          <el-input v-model="campus.contactTel" autocomplete="off" maxlength="13" readonly />
        </el-form-item>
        <el-form-item prop="campusEmail" label="机构邮箱">
          <el-input v-model="campus.campusEmail" autocomplete="off" maxlength="32" readonly />
        </el-form-item>
        <el-form-item prop="bank" label="银行">
          <el-autocomplete
            v-model="campus.bank"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :popper-append-to-body="false"
            popper-class="select-option"
            readonly
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item prop="account" label="银行账号">
          <el-input v-model="campus.account" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="30" readonly />
        </el-form-item>
        <el-form-item label="营业时间">
          <el-tooltip class="item" effect="dark" content="例：8:00~20:00" placement="bottom-start">
            <el-input v-model="campus.campusHours" autocomplete="off" placeholder="例：8:00~20:00" maxlength="20" readonly />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="campus.area" autocomplete="off" maxlength="10" readonly />
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            v-model="selectedOptions"
            size="large"
            :options="options"
            disabled
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item prop="conntact" label="联系人">
          <el-input v-model="campus.conntact" autocomplete="off" maxlength="10" readonly />
        </el-form-item>
        <el-form-item prop="contactNumber" label="联系人电话">
          <el-input v-model="campus.contactNumber" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" maxlength="11" readonly />
        </el-form-item>
        <el-form-item prop="head" label="负责人">
          <!-- <el-input v-model="campus.head" autocomplete="off" /> -->
          <el-select v-model="campus.head" placeholder="请选择" disabled>
            <el-option
              v-for="chead in head"
              :key="chead.id"
              :value="chead.id"
              :label="chead.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="campusState" label="状态">
          <el-select v-model="campus.campusState" placeholder="请选择" disabled>
            <el-option key="0" label="未上线" value="0" />
            <el-option key="1" label="已上线" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible=false">返 回</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getCampusByRe, conditionSearch, mohuSearch, getCampusById } from '@/api/campus'
import { getAllOrg } from '@/api/org'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { getUserById, getUserByGroup } from '@/api/consoleUser'
import { getAllOrgType } from '@/api/orgType'
// import aes from '@/utils/aes'
export default {
  name: 'Campus',
  // import引入的组件需要注入到对象中才能使用
  components: {

  },
  data() {
    // 这里存放数据
    return {
      url: process.env.VUE_APP_BASE_API + 'file/',
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      list: [],
      listLoading: false,
      visible: false,
      consoleUser: {},
      changePwd: {},
      title: '查看机构详情',
      status: '',
      search: {},
      mohu: '',
      text: '',
      campus: {},
      org: {},
      orgT: {},
      imageUrl: '',
      options: regionData,
      selectedOptions: [],
      areaList: {},
      area: '',
      banks: [],
      head: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData()
    this.getAllOrg()
    this.getAllOrgType()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
      console.log(row)
    },
    fetchData() {
      this.search = {}
      this.listLoading = true
      getCampusByRe().then((data) => {
        this.list = data.obj
        this.listLoading = false
      })
    },
    handleClose() {
      this.visible = false
    },

    handleOpen(id) {
      this.visible = true
      this.getAllHead()
      getCampusById(id).then((resp) => {
        this.campus = resp.obj
        this.campus.orgType = String(this.campus.orgType)
        this.campus.campusState = String(this.campus.campusState)
        this.imageUrl = resp.obj.campusImg
        this.jiema()
        getUserById(this.campus.head).then((resp) => {
          this.head.push(resp.obj)
          console.log(this.head)
        })
      })
    },

    conditionQuery() {
      console.log(this.search)
      conditionSearch(this.search).then((data) => {
        this.list = data.obj
        this.currentPage = 1
      })
    },
    mohuQuery() {
      console.log(this.mohu)
      mohuSearch(this.mohu).then((data) => {
        this.list = data.obj
        this.currentPage = 1
      })
    },
    getAllOrg() {
      getAllOrg().then((resp) => {
        this.org = resp.obj
      })
    },

    getAllOrgType() {
      getAllOrgType().then((resp) => {
        this.orgT = resp.obj
      })
    },

    handleChange(value) {
      console.log(this.selectedOptions)
      this.campus.provice = CodeToText[value[0]]
      this.campus.city = CodeToText[value[1]]
      this.campus.district = CodeToText[value[2]]
    },
    jiema() {
      this.selectedOptions = [TextToCode[this.campus.provice].code, TextToCode[this.campus.provice][this.campus.city].code, TextToCode[this.campus.provice][this.campus.city][this.campus.district].code]
    },
    querySearch(queryString, cb) {
      var banks = this.banks
      var results = queryString ? banks.filter(this.createFilter(queryString)) : banks
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (banks) => {
        return (banks.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },

    handleSelect(item) {
      console.log(item)
      this.campus.bank = item.value
    },
    getAllHead() {
      getUserByGroup(4).then((resp) => {
        this.head = resp.obj
      })
    },
    isCard(val) {
      if (!/^([1-9]{1})(\d{15}|\d{18})$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    isCellPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    isChinese(val) {
      if (/[^\u4E00-\u9FA5]/.test(val)) {
        return false
      } else {
        return true
      }
    },
    // 特殊字符过滤
    checkSpecificKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) !== -1) {
          return false
        }
      }
      return true
    },

    // 验证字符串
    validateFontSize(rule, value, callback) {
      if (value.length < 30) {
        callback()
      } else {
        callback(new Error('字符串长度在1-30之间'))
      }
    },

    // 验证字符串
    validateCharacter(rule, value, callback) {
      if (this.checkSpecificKey(value)) {
        callback()
      } else {
        callback(new Error('请不要输入特殊字符'))
      }
    },
    checkRtelePhone(rule, value, callback) {
      if (!value) {
        return callback(new Error('联系电话不能为空'))
      } else {
        const reg = /^(0\d{2,3}-?)?[0-9]{7,8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的联系电话'))
        }
      }
    },
    checkEmail(rule, value, callback) {
      if (!value) {
        return callback(new Error('电子邮箱不能为空'))
      } else {
        const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入有效的电子邮箱！'))
        }
      }
    },
    newContent(val) {
      console.log(val) // 获取输入内容
      this.campus.campusInfo = val
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.el-cascader{
  width: 400px;
}
.el-autocomplete{
  width: 400px;
}
.el-popper[x-placement^=bottom]{
		width:400px !important;
	}
</style>
<style  scoped>
#main{
  margin-left: 5px;
  margin-right: 5px;
}
#table-area{
  margin-left: 10px;
  margin-right: 10px;
}
#search-card {
  line-height: 0px;
        text-align: right;
        width: 100%;
        height: 70px;
        overflow-x: hidden;
}
.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 360px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 360px;
      height: 150px;
      display: block;
    }
</style>
